<template>
  <div>
    <el-row>
  <el-col :span="24">
    <div><h1>2</h1></div>
    <div><h2>2</h2></div>
    <div><h2>2</h2></div>
    <div><h1>2</h1></div>
  </el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>


  </div>
</template>

<script>
export default {
  data() {
    return {
      isDrop: false,
      x: 0,
      y: 0,
    };
  },
  methods: {
    up() {
      this.isDrop = false
    },
    down(e) {
      var box = document.getElementsByClassName("box")[0]; //获取元素
      // var x, y; //鼠标相对与div左边，上边的偏移
      var e = e || window.event; //要用event这个对象来获取鼠标的位置
      this.x = e.clientX - box.offsetLeft;
      this.y = e.clientY - box.offsetTop;
      this.isDrop = true; //设为true表示可以移动
    },
    move(e) {
      if (this.isDrop) {
        var box = document.getElementsByClassName("box")[0]; //获取元素
        var e = e || window.event;
        var moveX = e.clientX - this.x; //得到距离左边移动距离
        var moveY = e.clientY - this.y; //得到距离上边移动距离
        //可移动最大距离
        var maxX = document.documentElement.clientWidth - box.offsetWidth;
        var maxY = document.documentElement.clientHeight - box.offsetHeight;
        moveX = Math.min(maxX, Math.max(0, moveX));
        moveY = Math.min(maxY, Math.max(0, moveY));
        box.style.left = moveX + "px";
        box.style.top = moveY + "px";
      } else {
        return;
      }
    },
  },
};
</script>

<style lang='scss'>
// .box {
//   position: absolute;
//   width: 200px;
//   height: 200px;
//   background: pink;
// }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
